<!--
项目的主要作用是学会布局,
为了使得项目结构简单明了,且容易看懂,这里只是用下列标签来布局

div   --- 块级元素代表
a  ---  用作按钮和跳转
span ---  行内元素代表
img  ----  用作图片
ul  li   ---  用作典型的列表,目的是为了使html可读性更高
input  ---  用作输入
i   ----   用作图标的定义
u
b

-->

<html>
<div>这是一个div1</div>
<div>这是一个div2</div>
<div style="text-align:center;border:1px solid red">这是一个div3</div><!--align规定div元素中的内容的水平对齐方式-->
<div class="div">
    <img src="/thearchy/pic/learn/CSS选择器声明.png" id="img"><span class="mid">这是一个图片元素,而且你看不见我</span>
    <!--
    src为图片路径,可使用绝对路径或相对路径
    绝对路径不管项目在何处都能找到图片位置
    相对路径需要相对页面路径及图片文件路径,其中一个移动后则无法找到
    -->
    <!--图片格式居中
    父级需用:display: table;
    子级需用:vertical-align: middle;display: table-cell;
    即可完成,参考网址https://www.cnblogs.com/chenwenhao/p/6942536.html
    -->
</div>
<div><h4>这是一个div5,我也想不太一样</h4></div>
<div><span style="color: blue;font-size: 20px">这是一个div6<br/>我就是和他们不一样</span></div>
<!--
div定义HTML文档中的一个分隔区块或者一个区域部分
-->
<span id="span"><br/>这是一个行元素<!--标签被用来组合文档中的行内元素--></span>
<!--div和span都是用来划分区间但是没有实际语义的标签,差别就在于div是块级元素,不会其他元素在同一行;span是内联元素~可以与其他元素位于同一行-->
<div>
    <hr/>
    <a href="https://www.baidu.com/" target="_blank"><span title="别点啊,别怪我没提醒你">这是一个链接</span><!--href="#"为返回本页面--></a>
    <!--target 属性规定在何处打开链接文档
    _blank	    在新窗口中打开被链接文档
    _self	    默认。在相同的框架中打开被链接文档
    _parent	    在父框架集中打开被链接文档
    _top	    在整个窗口中打开被链接文档
    framename	在指定的框架中打开被链接文档
    -->
    <a href="https://www.baidu.com/">
        <img src="http://p0.so.qhimgs1.com/bdr/_240_/t01f1fabf82f5afd66c.jpg">
    </a>
    <hr/>
</div>

<ul><!--标签定义无序列表-->
    <li>这是一个列表元素1</li>
    <li>这是一个列表元素2</li>
    <li><img src="/thearchy/pic/learn/CSS选择器声明.png"></li>
    <li>这是一个列表元素4,你猜猜3是哪个</li>
</ul>
<input value="这是一个输入框"><!--input默认为输入框,在type设置属性后可作拥有其他作用-->
<input type="button" value="这是一个按钮"><!--button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）-->
<form>
    <li><input name="namee" type="checkbox">这是一个复选框1</li><!--checkbox	定义复选框-->
    <li><input name="namee"type="checkbox">这是一个复选框2</li>
</form>
<input type="file"><!--file	定义输入字段和 "浏览"按钮，供文件上传-->
<input type="hidden" value="这是一个隐藏字段"><!--hidden	定义隐藏的输入字段-->
<input type="image" src="http://p0.so.qhimgs1.com/bdr/_240_/t01f1fabf82f5afd66c.jpg"><!--image	定义图像形式的提交按钮-->

<form>
    <li><input name="name" type="radio">这是一个单选按钮1</li><!--radio	定义单选按钮,在表单内相同name时可完成单选操作-->
    <li><input name="name" type="radio">这是一个单选按钮2</li>
    <li><input name="name" type="radio">这是一个单选按钮3</li>
</form>
<form>
    <input value="将被重置信息">
    <input type="reset" value="这是一个重置按钮"><!--reset	定义重置按钮。重置按钮会清除表单中的所有数据-->
</form>
<form action="http://www.w3school.com.cn/tiy/t.asp?f=html_input_type_text" method="get">
    <span>账号:<input type="text" name="name" title="请输入账号"><br/></span><!--text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符-->
    <span>密码:<input type="password" name="password" title="请输入密码"></span><!--password	定义密码字段。该字段中的字符被掩码-->
    <!--title为标签,鼠标悬停时显示标签内容-->
    <input type="submit" value="Submit"/><!--submit	定义提交按钮。提交按钮会把表单数据发送到服务器-->
</form>
<div class="font">
    <span><i>这是斜体</i></span><br/>
    <span><b>这是粗体</b></span><br/>
    <span><u>这是下划线</u></span><br/>
    <span><i><b>这是粗斜体</b></i></span><br/>
    <span><i><u>这是下划线斜体</u></i></span><br/>
    <span><i><u><b>这是带下划线的粗斜体</b></u></i></span><br/>
    <span><b><u>这是带下划线的粗体</u></b></span><br/>
</div>




</html>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        color: brown;
        padding: 20px;
    }
    form{
        margin: 20px;
    }
    #span{
        width: 200px;
    }
    #img{
        height: 90px;
    }
    .div{
        display: inline-block;
        padding: 20px;
        height: 90px;
        background-color: brown;
        display: table;
    }
    .div .mid{
        display: inline;
        vertical-align: middle;
        display: table-cell;
    }
    .font{
        font-size: 20px;
        color: blue;
    }
</style>

